<template>
	<div class="list-wrapper">
		<div class="product" v-for="item in list" :key="item.productId">
			<div class="product__name">{{ item.name }}</div>
			<div
				class="product__img"
				:style="{ backgroundImage: `url(${item.productImg})` }"
			/>
			<div class="product__file">
				<a :href="item.occupationFile" target="_blank"
					><i class="el-icon-download"></i> 职业类别表</a
				>
			</div>
			<div class="product__content">
				<div
					class="coverage"
					v-for="detail in item.guarantees
						.map((g) => g.detail)
						.filter((d) => d)
						.flat()
						.slice(0, 4)"
				>
					<span>{{ detail.protection }}</span>
					<span class="cost">{{ detail.coverage }}</span>
				</div>
				<span> </span>
			</div>
			<div class="product__footer">
				<div class="cost">
					￥<span>{{ getMinPremium(item) }}</span> 起
				</div>
				<el-button
					round
					@click="toToubao(item)"
					type="primary"
					size="mini"
					class="btn"
					>去投保</el-button
				>
			</div>
		</div>
	</div>
</template>

<script>
import { list } from '@/api'
export default {
	data() {
		return {
			list: []
		}
	},
	computed: {},
	mounted() {
		this.fetchList()
	},
	methods: {
		fetchList() {
			list().then((res) => {
				this.list = res.data
			})
		},
		getMinPremium(item) {
			return Math.min(...item.guarantees.map((g) => g.premium * 1))
		},
		toToubao(item) {
			this.$router.push({
				path: '/detail',
				query: {
					productId: item.productId
				}
			})
		}
	},
	components: {}
}
</script>

<style lang="scss" scoped="scoped">
.list-wrapper {
	padding: 20px;
	&:after {
		clear: both;
		content: '';
		display: block;
	}
}

.product {
	height: 350px;
	width: 250px;
	box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15);
	border-radius: 10px;
	float: left;
	display: grid;
	grid-template-rows: 168px 35px 1fr 60px;
	margin: 0 15px 15px 0;
	position: relative;

	&__name {
		font-size: 16px;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		padding: 5px 8px;
		background-color: #fff;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	&__img {
		height: 168px;
		width: 100%;
		background-size: cover;
		background-position: center;
	}
	&__file {
		height: 35px;
		line-height: 35px;
		padding: 0 12px;
		font-size: 12px;
		background: #f4f4f4;
	}

	&__content {
		padding: 8px;
		padding-bottom: 0;
	}

	&__footer {
		padding: 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.cost {
			font-size: 16px;
			span {
				font-size: 24px;
				font-weight: 600;
				color: #000;
			}
		}
		.btn {
			font-size: 16px;
		}
	}
}

.coverage {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 5px;
	align-items: start;
	span {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
}
</style>
